<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>条件计划制定</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			input, select, textarea, label {
            font-size: 15px;
            /*height: 35px !important;*/
        }

        .mui-input-list .mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
            left: 0;
            width: 20px;
            height: 20px;
        }

            .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
                font-size: 22px;
                line-height: 30px;
            }

        .mui-input-list .mui-input-row {
            display: inline-block;
            height: 35px;
        }

            .mui-input-list .mui-input-row:after {
                background-color: transparent;
            }

        .mui-input-list .mui-checkbox label, .mui-radio label {
            padding-right: 0;
            padding-left: 30px;
            padding-right: 20px;
        }

        .mui-input-row .mui-btn {
            height: 50%;
            text-align: center;
            padding: 2%;
            float: left;
            margin: 5px 0;
            border-radius: 0;
            width: auto;
            background-clip: inherit !important;
        }

        .mui-input-row label.choose {
            padding: 2%;
            float: left;
            width: auto;
            background: #007aff;
            border-radius: 2px;
            color: white;
            margin: 1% .5%;
            height: 50% !important;
        }

        .mui-input-row label.choose_none {
            padding: 2%;
            float: left;
            width: auto;
            margin: 1% .5%;
            height: 50% !important;
            font-size: 14px;
        }

        .mui-input-row .mui-condition {
            width: 21% !important;
            text-align: center;
            border-bottom: 1px solid #ccc !important;
            padding: 2%;
            margin: 0 2px 0 7px;
            border-radius: 0;
            height: auto;
        }

        .mui-input-row .mui-condition-label {
            padding: 13px 2px;
            width: auto !important;
        }

        .mui-btn-block {
            padding: 8px 0;
            margin: 0;
        }

        .mui-card-title {
            height: 35px;
            line-height: 35px;
            margin-bottom: 5px;
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        #controls .mui-card-content, #targets .mui-card-content {
            max-height: 260px;
            padding: 3px 5px;
            overflow: hidden;
            overflow-y: auto;
        }
			.mui-bar{
				-webkit-box-shadow: 0 0 0px rgba(0,0,0,.85);
			    box-shadow: 0 0 0px rgba(0,0,0,.85);
				    height: 50px;
			}
			.mui-title{
				line-height: 50px;
			    color: #fff;
			}
			.mui-icon-back:before, .mui-icon-left-nav:before {
			    content: '\e471';
			    color: #fff;
			}
			.mui-icon-plusempty:before {
			    content: '\e468';
			    color: #fff;
			}

        * {
            /* touch-action: none; */
        }
    </style>
	</head>
	<body>
		<div style="height: 23px;width: 100%;background: #464646;position: fixed;top: 0;    z-index: 999;"></div>
		<header class="mui-bar mui-bar-nav" style="background: #464646;top: 22px;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">条件计划制定</h1>
		</header>
		<div class="mui-content mui-fullscreen" id="plans" style=" margin-top: 70px; padding-top: 0;">
			<!--计划内容-->
			<div class="mui-card mui-plan-info">
				<div class="mui-card-header" id="planheader"></div>
				<div class="mui-card-content">
					<!-- 计划信息 -->
					<div class="mui-input-row">
						<label>计划名称</label>
						<input type="text" placeholder="请输入计划名称" v-model="conditionobj.planname">
					</div>
					<!-- 控制类型选择 -->
					<div class="mui-input-row">
						<div class="mui-input-list">
							<label>控制类型</label>
							<div class="mui-input-row mui-radio" data-type="switch">
								<input name="radio1" type="radio" checked="checked">
								<label>开关</label>
							</div>
							<div class="mui-input-row mui-radio" data-type="control">
								<input name="radio1" type="radio">
								<label>控制器</label>
							</div>
						</div>
					</div>
					<!-- 控制设备选择 -->
					<div class="mui-input-row condition" data-type="kz">
						<label>控制设备</label>
						<div style="width: 65%;float: left;padding: 5px">
							<label class="choose_none" v-show="isctrl">-请选择-</label>
							<label class="choose" v-for="c in sel_control">{{c.name}}</label>
						</div>
					</div>
					<!-- 触发条件选择 -->
					<div class="mui-input-row condition" data-type="tj">
						<label>触发条件</label>
						<div style="width: 65%;float: left;padding: 5px;">
							<label class="choose_none" v-show="istar">-请选择-</label>
							<label class="choose" v-for="t in sel_target">{{t.name}}</label>
						</div>
					</div>
					<!-- 触发条件及执行条件选择 -->
					<div class="mui-card-content-inner">
						<!--触发条件-->
						<div class="mui-input-row" v-for="t in sel_target">
							<div class="mui-card-title">{{t.name}}</div>
							<div class="mui-input-row" style="padding-left:7px">
								<span class="mui-btn mui-btn-blue" data-sign="1" data-type="tstart" v-bind:data-name="t.name">大于</span>
								<span class="mui-btn" data-sign="0" data-type="tstart" v-bind:data-name="t.name">小于</span>
								<input type="number" v-model="t.limitstart" class="mui-condition">
								<label class="mui-condition-label">{{t.unit}}</label>
								<label class="mui-condition-label">开始任务</label>
							</div>
							<div class="mui-input-row" style="padding-left:7px">
								<span class="mui-btn" data-sign="1" data-type="tend" v-bind:data-name="t.name">大于</span>
								<span class="mui-btn mui-btn-blue" data-sign="0" data-type="tend" v-bind:data-name="t.name">小于</span>
								<input type="number" v-model="t.limitend" class="mui-condition">
								<label class="mui-condition-label">{{t.unit}}</label>
								<label class="mui-condition-label">结束任务</label>
							</div>
						</div>
						<!--执行状态（开关状态）-->
						<div class="mui-input-row" v-show="isswitch">
							<div class="mui-card-title">执行状态</div>
							<div class="mui-input-row">
								<label style="width:45%">开始时执行</label>
								<span class="mui-btn mui-btn-blue" data-state="open" data-type="cstart">开启</span>
								<span class="mui-btn" data-state="close" data-type="cstart">关闭</span>
							</div>
							<div class="mui-input-row">
								<label style="width:45%">结束时执行</label>
								<span class="mui-btn" data-type="cend" data-state="open">开启</span>
								<span class="mui-btn mui-btn-blue" data-type="cend" data-state="close">关闭</span>
							</div>
						</div>
						<!--执行状态（控制器状态）-->
						<div class="mui-input-row" v-show="iscontrol">
							<div class="mui-card-title">执行状态</div>
							<div class="mui-input-row">
								<label style="width:45%">开始时执行</label>
								<span class="mui-btn mui-btn-blue mui-btn-multi" data-state="open" data-type="cstart">展开</span>
								<span class="mui-btn mui-btn-multi" data-state="stop" data-type="cstart">停止</span>
								<span class="mui-btn mui-btn-multi" data-state="close" data-type="cstart">收拢</span>
							</div>
							<div class="mui-input-row">
								<label style="width:45%">结束时执行</label>
								<span class="mui-btn mui-btn-multi" data-type="cend" data-state="open">展开</span>
								<span class="mui-btn mui-btn-multi mui-btn-blue" data-type="cend" data-state="stop">停止</span>
								<span class="mui-btn mui-btn-multi" data-type="cend" data-state="close">收拢</span>
							</div>
						</div>
					</div>
				</div>
				<div class="mui-card-footer">
					<label style="font-size:.8em">注意：条件计划优先权比时间计划要高，将会优先保障</label>
				</div>
			</div>
			<!--计划保存-->
			<div class="mui-card">
				<div class="mui-card-content-inner">
					<div class="mui-btn mui-btn-block mui-btn-blue" v-on:click="submitPlan()">保存计划</div>
				</div>
			</div>
			<!--弹框（控制器选择）-->
			<div class="mui-popover mui-popover-action mui-popover-bottom" id="controls">
				<div class="mui-card">
					<div class="mui-card-header">选择设备</div>
					<div class="mui-card-content mui-input-group" v-show="isswitch">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-input-row mui-checkbox" v-for="sw in switchs">
									<label>{{sw.powertargetname}}</label>
									<input name="checkbox1" v-bind:value="sw.targetcode" v-bind:data-controltype="sw.targettype" v-bind:data-name="sw.powertargetname"
									 type="checkbox" data-type="switch">
								</div>
							</div>
						</div>
					</div>
					<div class="mui-card-content mui-input-group" v-show="iscontrol">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-input-row mui-checkbox" v-for="ct in controls">
									<label>{{ct.powertargetname}}</label>
									<input name="checkbox1" v-bind:value="ct.targetcode" v-bind:data-controltype="ct.targettype" v-bind:data-name="ct.powertargetname"
									 type="checkbox" data-type="control">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--弹框（指标选择）-->
			<div class="mui-popover mui-popover-action mui-popover-bottom" id="targets">
				<div class="mui-card">
					<div class="mui-card-header">选择指标</div>
					<div class="mui-card-content mui-input-group">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-input-row mui-checkbox" v-for="t in targets">
									<label>{{t.name}}</label>
									<input name="checkbox1" v-bind:value="t.name" type="checkbox" data-type="target">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/common.js"></script>
		<script src="js/config.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue.min.js"></script>
		<script>
			mui.init();
			mui.plusReady(function(){
				var self=plus.webview.all();
				var old_back = mui.back;
				mui.back = function() {
					var wobj = plus.webview.getWebviewById("plan.html");//注意 HBuilder 是   1.html 的 ID  你如果1.html 有ID   要替换掉HBuilder，
					//wobj.reload(true);
					wobj.evalJS("vm_plan.LoadPlanData();")
					//console.log(JSON.stringify(wobj));
					old_back()
				}
			});
			mui.ready(function() {
				var vm_plan = new Vue({
					el: "#plans",
					data: {
						switchs: [], // 开关集合
						controls: [], // 控制器集合
						targets: [], // 指标集合
						isswitch: true, // 开关显示状态
						iscontrol: false, // 控制器显示状态
						sel_control: [], // 选择控制集合
						sel_target: [], // 选择指标集合
						isctrl: true, // 开关是否显示请选择
						istar: true, // 指标是否显示请选择
						maxstate: "open", // 开始时执行
						minstate: "close", // 结束时执行
						conditionobj: { // 提交计划内容
							uid: 1, // 用户编号
							planname: "", // 计划名称
							desc: "", // 计划描述
							plantype: "", // 计划类型（interval | condition）
							ctype: "switch", // 控制器类型（switch | control）
							controls: [], // 控制器集合
							targets: [], // 指标集合
							powerid: "", // 权限编号
						}
					},
					methods: {
						loadData: function() {
							if (vm_plan.conditionobj.powerid == null) return;
							var data = setting.GetCacheConfig();
							if (data == null) return;
							for (var i = 0; i < data.length; i++) {
								if (vm_plan.conditionobj.powerid != data[i].powerid) continue;
								// 控制器对象
								mui("#planheader")[0].innerHTML = data[i].powername + "制定计划";
								if (data[i].controlTargetList.length > 0) {
									for (var j in data[i].controlTargetList) {
										if (data[i].controlTargetList[j].controlType == "switch") {
											vm_plan.$data.switchs.push(data[i].controlTargetList[j]);
										} else if (data[i].controlTargetList[j].controlType == "control") {
											vm_plan.$data.controls.push(data[i].controlTargetList[j]);
										}
									}
								}
								// 传感器对象，需要将传感器的名称过滤重复集合，拼接传感器标识，方便后续保存计划操作
								if (data[i].collectionTargetList.length > 0) {
									for (var j in data[i].collectionTargetList) {
										if (data[i].collectionTargetList[j].controlType == "data") {
											var tg = data[i].collectionTargetList[j];
											var tar = vm_plan.$data.targets.getobj("name", tg.powertargetname);
											if (tar == undefined) {
												vm_plan.$data.targets.push({
													code: tg.targetcode,
													name: tg.powertargetname,
													limitstart: tg.targetLimitStart,
													limitend: tg.targetLimitEnd,
													unit: tg.targetTypeUnit,
													type: tg.targettype,
													maxsign: 1,
													minsign: 0,
													sign: 0,
												});
											} else {
												tar.code += "," + tg.targetcode;
											}
										}
									}
								}
							}
							// 弹出选择框无法自动识别高度，需要手动设置外部高度，此处根据填充数据来自动设置高度，每个元素高度为40px,间距2px
							mui('.mui-popover .mui-card-content').each(function(index, item) {
								var len = 0;
								switch (index) {
									case 0:
										len = vm_plan.$data.switchs.length;
										break;
									case 1:
										len = vm_plan.$data.controls.length;
										break;
									case 2:
										len = vm_plan.$data.targets.length;
										break;
								}
								item.style.height = (len > 5 ? 5 : len) * 42 + "px";
							});
						},
						submitPlan: function() {
							var d = vm_plan.$data;
							if (d.conditionobj.planname == "") {
								mui.toast("请输入计划名称", "div");
								return;
							}
							if (d.sel_control.length < 1) {
								mui.toast("请选择控制设备", "div");
								return;
							}
							if (d.sel_target.length < 1) {
								mui.toast("请选择指标", "div");
								return;
							}
							var p = {};
							p.powerid = d.conditionobj.powerid;
							p.uid = d.conditionobj.uid;
							p.planname = d.conditionobj.planname;
							p.plantype = "condition";
							// 构建控制集合
							p.controls = [];
							for (var i = 0; i < d.sel_control.length; i++) {
								p.controls.push({
									code: d.sel_control[i].targetcode, // 控制器标识
									name: d.sel_control[i].name, // 控制器名称
									type: d.sel_control[i].targettype, // 控制器类型
								});
							}
							// 构建指标集合
							p.targets = [];
							for (var i = 0; i < d.sel_target.length; i++) {
								var cc = d.sel_target[i].code.split(',');
								for (var j = 0; j < cc.length; j++) {
									p.targets.push({
										tcode: cc[j], // 指标标识
										tname: d.sel_target[i].name, // 指标名称
										ttype: d.sel_target[i].type, // 指标类型
										max: d.sel_target[i].limitstart, // 最大值
										min: d.sel_target[i].limitend, // 最小值
										maxsign: d.sel_target[i].maxsign, // 最大值符号（大于:1 | 小于:0）
										minsign: d.sel_target[i].minsign, // 最小值符号（大于:1 | 小于:0）
										maxstate: d.minstate, // 达到最大条件执行状态
										minstate: d.maxstate, // 达到最小条件执行状态
										sign: d.sel_target[i].sign, // 并行条件状态（与:0 | 或:1）
									});
								}
							}
							mui.ajax('http://124.232.165.93:34881/Plan/AddPlan', {
								data: p,
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									// console.log(JSON.stringify(data));
									if(data.code == "0"){
										mui.toast("保存计划成功", "div");
										setTimeout(function(){mui.back();},1000);
									}else{
										mui.toast(data.msg, "div");
									}
								},
								error: function(xhr, type, errorThrown) {
									//异常处理
									console.log(type);
								}
							});
						}
					},
					mounted: function() {
						this.$nextTick(function() {
							vm_plan.conditionobj.powerid = GetQueryString("powerid");
							vm_plan.conditionobj.uid = GetQueryString("uid");
							vm_plan.loadData();
						});
					}
				});

				/**
				 * 初始化弹框内的滚动插件，否则无法使用
				 * */
				mui(".mui-scroll-wrapper").scroll();

				/**
				 * 触发条件选择事件，同时触发相关条件的联动事件
				 */
				mui(".mui-plan-info").on("tap", ".mui-btn", function() {
					var self = this;
					// 已聚焦的元素不处理
					if (self.className.indexOf("mui-btn-blue") != -1) return;
					var parent = self.parentElement;
					var selfindex;
					var siblingparentElement = parent.nextElementSibling != null ? parent.nextElementSibling : parent.previousElementSibling;
					// 同级元素切换聚焦模式
					mui.each(parent.children, function(index, item) {
						if (item.className.indexOf("mui-btn") == -1) return; // 排除非按钮元素
						if (item.innerText == self.innerText) { // 当前选择元素
							item.classList.add("mui-btn-blue");
							selfindex = index;
							switch (self.dataset.type) {
								case "cstart": // 执行类型
									vm_plan.$data.maxstate = self.dataset.state;
									break;
								case "cend": // 执行类型
									vm_plan.$data.minstate = self.dataset.state;
									break;
								case "tstart": // 条件类型
									var tar = vm_plan.$data.sel_target.getobj("name", self.dataset.name);
									tar.maxsign = self.dataset.sign;
									break;
								case "tend": // 条件类型
									var tar = vm_plan.$data.sel_target.getobj("name", self.dataset.name);
									tar.minsign = self.dataset.sign;
									break;
							}
						} else {
							item.classList.remove("mui-btn-blue");
						}
					});
				})

				/**
				 * 控制开关类型选项监听事件
				 */
				mui('.mui-input-list').on("tap", ".mui-radio", function(e) {
					// 复位选择信息，清空选择条件
					vm_plan.$data.sel_control = [];
					vm_plan.$data.isctrl = true;
					mui("#controls input[type=checkbox]").each(function(i, v) {
						v.checked = false;
					})
					switch (this.dataset.type) {
						case "switch":
							vm_plan.$data.isswitch = true;
							vm_plan.$data.iscontrol = false;
							break;
						case "control":
							vm_plan.$data.isswitch = false;
							vm_plan.$data.iscontrol = true;
							break;
					}
				});

				/**
				 * 条件触发事件
				 */
				mui(".mui-card-content").on("tap", ".condition", function() {
					switch (this.dataset.type) {
						case "kz":
							mui('#controls').popover('toggle');
							break;
						case "tj":
							mui("#targets").popover('toggle');
							break;
					}
				})

				/**
				 * 控制器/条件改变事件
				 * */
				mui('.mui-input-group').on('change', 'input', function() {
					switch (this.dataset.type) {
						case "switch":
						case "control":
							var c = vm_plan.$data.sel_control.getobj("name", this.dataset.name);
							if (this.checked && c == undefined) {
								// 添加控制集合数据
								vm_plan.$data.sel_control.push({
									name: this.dataset.name,
									targetcode: this.value,
									targettype: this.dataset.controltype,
								});
							} else {
								vm_plan.$data.sel_control.remove(c);
							}
							vm_plan.$data.isctrl = vm_plan.$data.sel_control.length < 1;
							break;
						case "target":
							var t = vm_plan.$data.sel_target.getobj("name", this.value);
							var tar = vm_plan.$data.targets.getobj("name", this.value);
							if (this.checked && t == undefined) {
								// 添加指标集合数据
								vm_plan.$data.sel_target.push(tar);
							} else {
								vm_plan.$data.sel_target.remove(tar);
							}
							vm_plan.$data.istar = vm_plan.$data.sel_target.length < 1;
							break;
					}
				});
			})
		</script>
	</body>
</html>
